<template>
  <el-main>
    <el-form
      :model="ReginForm"
      ref="ReginForm"
      :rules="rule"
      class="regform"
      label-width="0">
      <h3 class="login-text">运营商登录</h3>
      <el-form-item prop="operatorPhone">
        <el-input type="text" v-model.number="ReginForm.operatorPhone" placeholder="手机号码/账号"></el-input>
      </el-form-item>
      <el-form-item prop="operatorPassword">
        <el-input type="password" v-model="ReginForm.operatorPassword" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="operatorPassword2">
        <el-input type="password" v-model="ReginForm.operatorPassword2" placeholder="确认密码" show-password></el-input>
      </el-form-item>

      <el-form class="form-wrapper" ref="myForm" :model="myForm" label-width="85px">
        <el-form-item label="滑块验证：" style="margin-top: -50px">
          <div style="margin-left: 25px"><slider ref="slider"></slider></div>
        </el-form-item>

      </el-form>

      <el-form-item >
        <el-button
          type="success"
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          登入
        </el-button>
        <hr>
        <p>没有账号，马上去<span class="to" @click="tologin">注册</span></p>
      </el-form-item>
    </el-form>
  </el-main>

</template>

<script type="text/ecmascript-6">
  import slider from './slider'
  export default {
    data () {
      let confirmpasswordCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码不能为空'))
        } else {
          return callback()
        }
      }
      let telCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('电话号码不能为空'))
        } else if (!Number.isInteger(value)) {
          return callback(new Error('电话号码必须是数字'))
        } else if (value.toString().length !== 11) {
          return callback(new Error('电话号码必须是11位数字'))
        } else {
          callback()
        }
      }
      return {
        ReginForm: {

          operatorPassword: '',
          operatorPassword2:'',

          operatorPhone: '',



        },
        myForm: {},
        logining: false,
        sendAuthCode: true,/*布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */
        auth_time: 0, /*倒计时 计数器*/
        verification: "",//绑定输入验证码框框
        rule: {
          operatorPassword: [
            {
              required: true,
              message: '密码不能为空',
              trigger: 'blur'
            }
          ],
          operatorPhone: [
            {
              required: true,
              validator: telCheck,
              trigger: 'blur'
            }
          ],
        }
      }
    },
    components: {
      slider
    },
    methods: {
      submit () {
        if (this.$refs['slider']) {
          // 未通过验证时，提示错误信息并返回
          if (!this.$refs['slider'].confirmSuccess) {
            this.$message.error("请拖动滑块验证");
            return ;
          }
        }
        // 通过验证后提交
        this.$message.success("手动验证已通过");
        // alert("注册界面注册")
        console.log("取到的数据是--：" + "密码"+this.ReginForm.operatorPassword+ "电话"+this.ReginForm.operatorPhone)
        if (this.ReginForm.operatorPassword == '' ||  this.ReginForm.operatorPhone == ''   ){
          alert("所有内容都不能为空")
          return false;
        }
        if(this.ReginForm.operatorPassword != this.ReginForm.operatorPassword2){
          alert("两次密码不一致，重新输入")
          return false;
        }

        this.$axios.post("/OpLogin", {
          'operatorPassword':this.$md5(this.ReginForm.operatorPassword),
          'operatorPhone': this.ReginForm.operatorPhone,
        }).then(response => {
          var str = JSON.stringify(response.data)
          console.log("登入打印了啥++++"+str)
          if (response.data == "1") {

            alert("登入成功")
            this.$router.push({
              path: "/Rigter"
            });

          } else if(response.data == "2"){
            alert("登入失败,账号或者密码错误")
          }else if(response.data == "3"){
            alert("登入失败,账号和密码不能为空")
          }
        }).catch(err => {
          alert(err)
        })

      },


      reset () {
        this.$refs.ReginForm.resetFields()
      },
      tologin () {
//已经注册过跳转到登入界面
        this.$router.push({
          path: "/Rigter"
        });
      },

      // getAuthCode () {
      //   if (this.$refs['slider']) {
      //     // 未通过验证时，提示错误信息并返回
      //     if (!this.$refs['slider'].confirmSuccess) {
      //       this.$message.error("请拖动滑块验证");
      //       return false;
      //     }
      //   }
      //   // 通过验证后提交
      //   // TO DO ...
      //   this.$message.success("验证成功，可以登录");
      //   console.log("电话：" + this.ReginForm.operatorPhone)
      //   this.$axios.post("/sendcode", {
      //
      //     operatorPhone: this.ReginForm.operatorPhone,
      //
      //   }).then(resp => {
      //     if (resp.data == "1") {
      //       alert("短信发送成功，请稍后")
      //     } else if (resp.data == "2"){
      //       alert("短信发送失败，请输入号码")
      //     }
      //   }).catch(err => {
      //     alert(err)
      //   })
      //
      // },
    }
  }
</script>


<style scoped>
  .regform {
    margin: 20px auto;
    width: 310px;
    background: #fff;
    box-shadow: 0 0 10px #B4BCCC;
    padding: 30px 30px 0 30px;
    border-radius: 25px;
  }
  .submitBtn {
    width: 65%;
  }
  .to {
    color: #FA5555;
    cursor: pointer;
  }
  .auth_input{
    width:105px;
    height:38px;
    margin-bottom:20px;
    border:1px solid #DCDFE6;
    /* color:red; */
    padding-left:10px;
    border-radius: 8%;
  }
  .regform[data-v-92def6b0]{
    width:370px;
    min-height: 440px;
  }
  .login-text{
    text-align: center;
    margin-bottom:20px;
  }
  .form-wrapper {
    margin-top: 50px;
    width: 300px;
  }
</style>
